<template>
  <el-dialog
    class="auth-dialog"
    :visible.sync="dialogAuth"
    width="1000px"
  >
    <div class="content" >
      <div class="img">
        <img src="@/assets/images/ali1688.png" alt="" >
        <div class="auth-img-jump" @click="jumpAuth"></div>
      </div>
      <div>
        <template v-if="this.$store.getters.expire1688">
          <p>您当前授权的1688账号「{{this.$store.getters.nickname1688}}」已过期，暂无法使用该功能</p>
          <p>由于1688平台限制，「MinoShipping」访问您1688店铺信息的时间段最高为一个月，如需继续使用，请重新前往授权</p>
        </template>
        <template v-else>
          <p>您尚未授权我们的系统「{{getAppName()}}」访问您1688账号的相关权限，因此该功能暂无法使用</p>
          <p>授权后，系统才能加载必要的数据信息提供完整的功能服务</p>
        </template>

      </div>
      <div style="display: flex;align-items: center;justify-content: center;" class="mgt10">
        <el-button type="1688" @click="jumpAuth">前往授权</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {getAppName} from "@/utils/settings";
import {EventBus} from "@/utils/eventBus";

export default {
  name: "Ali1688AuthDialog",
  props:{

  },
  data(){
    return {
      loop: false, // 是否循环请求接口
      loopFunc: null, // 定时器
      dialogAuth: false,
    }
  },
  mounted(){
    EventBus.$on('show1688AuthDialog',()=>{
      this.dialogAuth = true
    })
  },
  methods:{
    getAppName,
    // 跳转到授权页面
    jumpAuth(){
      window.open(this.$store.getters.auth1688Url,'_blank')
      this.getAuthInfo()
    },
    // 获取授权信息
    getAuthInfo(){
      if(this.loop){
        return;
      }
      this.loop = true;
      this.loopFunc = setInterval(()=>{
        if(this.$store.getters.auth1688 === true && this.dialogAuth){
          this.$store.dispatch('user/getInfo');
        }else{
          clearInterval(this.loopFunc);
          this.loop = false;
          if(!this.$store.getters.auth1688){
            this.$router.go(0);
          }
        }
      },3000)

    }
  }
}
</script>

<style scoped lang="scss">
.auth-dialog{
  .content{
    margin: 0 auto;
    width: 900px;
    padding: 30px 0;
    .img{
      text-align: center;
    }
    p{
      margin: 0;
      padding: 0;
      line-height: 20px;
      font-weight: 650;
      color: #1E3369;
      font-size: 13px;
      text-align: center;
    }
  }
  .auth-img-jump{
    position: absolute;
    cursor: pointer;
  //background: #cccccc;
    width: 150px;
    height: 150px;
    top: 180px;
    left: 320px;
  }
}
</style>
